{% extends 'base/base.html' %}
{% load static %}

{% block css %}
<link href="/static/index/css/default.css" rel="stylesheet">
<link href="/static/wenjuanresult/select_t.css" rel="stylesheet">
<link href="/static/css/bootstrap-multiselect.css" rel="stylesheet">
{% endblock %}

<!-- 主页默认 content -->
{% block content %}
  <!-- 调查问卷开始 -->
  <div class="section-block-grey">

      <div class="center-holder section-heading" style="margin-top:4rem;margin-bottom: 6rem;">
        <p style="font-size:30px"><b>率的统计</b></p>
      </div>
      <select  id="self_select" class="shortselect" >
                    <option value="湖南省">湖南省</option>
                    <option value="湖北省">湖北省</option>
                    <option value="江西省">江西省</option>
                    <option value="河南省">河南省</option>
                    <option value="安徽省">安徽省</option>
      </select>
      <br>
      <br>

      <p style="font-size:20px"><b>发病率的统计</b></p>

      <div id="thumbnailUploadContainer" class="col-sm-10" style="float: left; margin-right: 50px;">
          <input id="importfile" name="excelFile" type="file" class="form-control" style="width: 300px; display: inline;" />
          <input id="saveZipButton" type="button" style="width: 60px;height: 35px;" value="上传" />
      </div>
      <br>
      <br>
      <div id="table1" style="width: 100%;height:200px;"></div>

      <p style="font-size:20px"><b>死亡率的统计</b></p>
      <div id="thumbnailUploadContainer2" class="col-sm-10" style="float: left; margin-right: 50px; ">
          <input id="importfile2" name="excelFile" type="file" class="form-control" style="width: 300px; display: inline;" />
          <input id="saveZipButton2" type="button" style="width: 60px;height: 35px;" value="上传" />
      </div>
      <br>
      <br>
      <div id="table2" style="width: 100%;height:200px;"></div>

  </div>
{% endblock %}


{% block js %}
<script src="/static/js/echarts.js"></script>
<script src="/static/js/bootstrap-multiselect.js"></script>
<script src="/static/js/xlsx.core.min.js"></script>
<script>
var myChart1 = echarts.init(document.getElementById('table1'));
myChart1.setOption({
        tooltip: {
             trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
        },
        series: []

    });


$("#saveZipButton").on('click', function(){
      var formData = new FormData();//formData里面存储的数据是以健值对的形式存在的，key是唯一的，一个key可能对应多个value
      var fileobj = document.getElementById("importfile").files[0];//获取文件对象
      var name = $("#importfile").val();//路径或者文件名
      var sheng = $("#self_select").val();
      formData.append("file",fileobj);
      formData.append("sheng",sheng);//这个地方可以传递多个参数
      $.ajax({
          url :  "{% url 'upload' %}", //后台处理函数的url
          type : 'POST',
          async : false,
          data : formData,
          // 告诉jQuery不要去处理发送的数据
          processData : false,
          // 告诉jQuery不要去设置Content-Type请求头
          contentType : false,
          beforeSend:function(){
              console.log("正在进行，请稍候");
            },
            success: function(data){
              data = JSON.parse(data);
                console.log(data);
                rownum = data.rownum;
                count = data.count;
                series = [];
                series.push(
                    {
                        name:"test",
                        data: [
                            {value: count, name: '脑出血患者'},
                            {value: rownum-2-count, name: '非脑出血患者'},//这里-2是因为传入的有2行是标题
                        ],
                        type:'pie',
                        radius:60,
                        center:['50%','50%'],

                    }
                )
                myChart1.setOption({        //加载数据图表
                    series: series,
                });
           }
           });
  });
    </script>

<script>
var myChart2 = echarts.init(document.getElementById('table2'));
myChart2.setOption({
        tooltip: {
             trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
        },
        series: []

    });


$("#saveZipButton2").on('click', function(){
      var formData = new FormData();
      var fileobj = document.getElementById("importfile2").files[0];
      var name = $("#importfile2").val();
      var sheng = $("#self_select").val();
      formData.append("file",fileobj);
      formData.append("sheng",sheng);//这个地方可以传递多个参数
      $.ajax({
          url :  "{% url 'upload2' %}", //后台处理函数的url
          type : 'POST',
          async : false,
          data : formData,
          // 告诉jQuery不要去处理发送的数据
          processData : false,
          // 告诉jQuery不要去设置Content-Type请求头
          contentType : false,
          beforeSend:function(){
              console.log("正在进行，请稍候");
            },
            success: function(data){
              data = JSON.parse(data);
                console.log(data);
                rownum = data.rownum;
                count = data.count;
                series = [];
                series.push(
                    {
                        name:"test",
                        data: [
                            {value: count, name: '脑出血去世'},
                                {value: rownum-3-count, name: '非脑出血去世'},
                        ],
                        type:'pie',
                        radius:60,
                        center:['50%','50%'],

                    }
                )
                myChart2.setOption({        //加载数据图表
                    series: series,
                });
           }
           });
  });
    </script>

{% endblock %}